<template>
    <div class="app-container">
        <FilterForm :data="filterData" @search="getList" labelWidth="86px" />

        <el-row :gutter="10" class="opr-btn-group mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                    v-hasPermi="['customerSee:customerSee:add']"
                    >新增</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="success"
                    plain
                    icon="el-icon-edit"
                    size="mini"
                    :disabled="single"
                    @click="handleUpdate"
                    v-hasPermi="['customerSee:customerSee:edit']"
                    >修改</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="danger"
                    plain
                    icon="el-icon-delete"
                    size="mini"
                    :disabled="multiple"
                    @click="handleDelete"
                    v-hasPermi="['customerSee:customerSee:remove']"
                    >删除</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    :loading="exportLoading"
                    @click="handleExport"
                    v-hasPermi="['customerSee:customerSee:export']"
                    >导出</el-button
                >
            </el-col>
        </el-row>

        <Table
            :api="$Api.customer.visit.list"
            :selection="true"
            @select="handleSelectionChange"
            ref="Table"
        >
            <el-table-column label="客户" align="center" prop="customerCode" />
            <el-table-column
                label="电话"
                align="center"
                prop="customerSeePhone"
            />
            <el-table-column
                label="拜访人"
                align="center"
                prop="customerSeeName"
            />
            <el-table-column
                label="拜访日期"
                align="center"
                prop="customerSeeDate"
            />
            <el-table-column
                label="拜访方式"
                align="center"
                prop="customerSeeType"
            />
            <el-table-column label="内容" align="center" prop="remark" />
            <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click.native.stop="handleUpdate(scope.row)"
                        v-hasPermi="['customerSee:customerSee:edit']"
                        >修改</el-button
                    >
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click.native.stop="handleDelete(scope.row)"
                        v-hasPermi="['customerSee:customerSee:remove']"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </Table>

        <!-- 添加或修改拜访客户对话框 -->
        <el-dialog
            :title="title"
            :visible.sync="open"
            width="50%"
            append-to-body
            :close-on-click-modal="false"
        >
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-row :gutter="10">
                    <el-col :span="16">
                        <el-form-item label="客户" prop="customerCode">
                            <SupplierSelect
                                :typeSelect="customer"
                                v-model="form.customerCode"
                                style="width: auto; display: inline-block"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="14">
                        <el-form-item label="电话" prop="customerSeePhone">
                            <el-input
                                v-model="form.customerSeePhone"
                                placeholder="请输入电话"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="拜访人" prop="customerSeeName">
                            <SupplierSelect
                                :typeSelect="sales"
                                v-model="form.customerSeeName"
                                style="width: auto; display: inline-block"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="拜访日期" prop="customerSeeDate">
                            <el-date-picker
                                v-model="form.customerSeeDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择拜访日期"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="拜访方式" prop="customerSeeType">
                            <el-select
                                v-model="form.customerSeeType"
                                placeholder="请选择拜访方式"
                            >
                                <el-option
                                    v-for="item in visitWayList"
                                    :key="item.value"
                                    :label="item.customerSeeType"
                                    :value="item.customerSeeType"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="14">
                        <el-form-item label="内容" prop="remark">
                            <el-input
                                v-model="form.remark"
                                placeholder="请输入内容"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import SupplierSelect from "@/components/SupplierSelect";

export default {
    name: "visit",
    components: {
        SupplierSelect,
    },
    data() {
        return {
            filterData: [
                {
                    label: "拜访日期",
                    type: "period_date",
                    st: "beginRegisterTime",
                    end: "endRegisterTime",
                    scale: 2,
                },
                {
                    label: "客户",
                    name: "customerCode",
                    type: "customer",
                },
                {
                    label: "拜访方式",
                    name: "customerSeeType",
                    type: "select",
                    select: {
                        option: [],
                        selectLabel: "customerSeeType",
                        selectValue: "customerSeeType",
                    },
                },
                { label: "拜访人", name: "customerSeeName", type: "sales" },
                { label: "拜访内容", name: "remark" },
            ],
            // 遮罩层
            loading: true,
            // 导出遮罩层
            exportLoading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,

            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 组件替换条件
            customer: "customerName",
            sales: "nickName",
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                customerCode: null,
                customerSeePhone: null,
                customerSeeName: null,
                customerSeeDate: null,
                customerSeeType: null,
                remark: null,
            },
            // 走访方式
            visitWayList: [
                {
                    value: "1",
                    customerSeeType: "电访",
                },
                {
                    value: "2",
                    customerSeeType: "走访",
                },
                {
                    value: "3",
                    customerSeeType: "接待",
                },
                {
                    value: "4",
                    customerSeeType: "来电",
                },
            ],
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                customerName: [
                    {
                        required: true,
                        message: "请选择客户",
                        trigger: "blur",
                    },
                ],
                customerSeePhone: [
                    {
                        required: true,
                        trigger: "blur",
                        validator: this.checkPhone,
                    },
                ],
                customerSeeName: [
                    {
                        required: true,
                        message: "拜访人不能为空",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    created() {
        this.filterData.forEach((v) => {
            if (v.name == "customerSeeType") {
                v.select.option = this.visitWayList;
            }
        });
    },

    methods: {
        /** 查询拜访客户列表 */
        getList(params) {
            !params.customerCode && (params.customerCode = null);
            this.$refs.Table.getData(params);
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                customerSeeId: null,
                customerCode: null,
                customerSeePhone: null,
                customerSeeName: null,
                customerSeeDate: null,
                customerSeeType: null,
                remark: null,
            };
            this.resetForm("form");
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.customerSeeId);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加拜访客户";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const customerSeeId = row.customerSeeId || this.ids[0];
            this.$Api.customer.visit.detail(customerSeeId).then((res) => {
                this.form = res.data;
                this.open = true;
                this.title = "修改拜访客户";
            });
        },
        /** 提交按钮 */
        submitForm() {
            let { customerSeeId } = this.form;
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if (customerSeeId != null) {
                        this.$Api.customer.visit
                            .update(this.form)
                            .then((res) => {
                                this.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                            });
                    } else {
                        this.$Api.customer.visit.add(this.form).then((res) => {
                            this.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const customerSeeIds = row.customerSeeId || this.ids;
            this.$confirm(
                '是否确认删除拜访客户编号为"' + customerSeeIds + '"的数据项?',
                "警告",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(() => {
                    this.$Api.customer.visit.del(customerSeeIds).then((res) => {
                        let { code } = res;
                        if (code == 200) {
                            this.getList();
                            this.msgSuccess("删除成功");
                        }
                    });
                })
                .catch(() => {});
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams;
            this.$confirm("是否确认导出所有拜访客户数据项?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.exportLoading = true;
                    this.$Api.customer.visit.export(queryParams).then((res) => {
                        let { code, msg } = res;
                        if (code == 200) {
                            this.download(msg);
                            this.exportLoading = false;
                        }
                    });
                })
                .catch(() => {});
        },
    },
};
</script>
<style lang="scss">
</style>
